<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>信用卡详细信息</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <script th:src="@{/bootstrap/js/jquery.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
</head>
<body onload="loadPage()">
<div class="container">
    <div class="panel panel-info text-center" style="margin-top: 50px;">
        <div class="panel-heading" style="letter-spacing:30px;">
            <h3>账户详情页面</h3>
        </div>
        <div class="panel-body">

            <table class="table table-condensed table-responsive table-hover text-left">
                <thead class="tab-header-background">
                <tr>
                    <th scope="col" colspan="4" style="text-align: center;font-size: 18px;font-weight: bold">账户信息表格</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row" style="width: 25%;">#</th>
                    <th scope="row" style="width: 25%;">服务名称</th>
                    <th scope="row" style="width: 25%;">查询结果</th>
                    <th scope="row" style="width: 25%;">备注</th>
                </tr>
                <tr>
                    <th scope="row">1</th>
                    <td>币种</td>
                    <td>人民币</td>
                    <td>交易币种</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>账户信用额度</td>
                    <td id="userLimit" th:text="${user.userLimit}"></td>
                    <td>额度</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>账户可用额度</td>
                    <td>
                        <span id="availableCredit" th:text="${user.availableCredit}"></span>
                        <span>/</span>
                        <span id="consumed" th:text="${user.userLimit}-${user.availableCredit}"></span>
                    </td>
                    <td>可消费额度/已消费额度</td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td>未出账分期本金</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th scope="row">5</th>
                    <td>分期交易查询</td>
                    <td>点击查看分期详情</td>
                    <td>
                        <a id="modal" type="button" data-toggle="modal" data-target="#exampleModal">
                            查看详情
                        </a>
                    </td>
                </tr>
                <tr>
                    <th scope="row">6</th>
                    <td>预接现金可用额度</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <th scope="row">7</th>
                    <td>每月账单日</td>
                    <td id="billDate" th:text="${user.billDate}"></td>
                    <td>每月账单生成日期</td>
                </tr>
                <tr>
                    <th scope="row">8</th>
                    <td>账单类型</td>
                    <td id="billType" th:text="${user.billType}"></td>
                    <td id="typeFather">
                        <button id="updateBillType" class="btn btn-primary">修改账单寄送方式</button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">9</th>
                    <td>财务提醒</td>
                    <td id="remindTime" th:text="'每月'+${credit.remindTime}+'日'"></td>
                    <td id="timeFather">
                        <button id="updateRemindTime" class="btn btn-primary">修改还款提醒时间</button>
                    </td>
                </tr>
                </tbody>
                <thead class="tab-header-background">
                <tr>
                    <th scope="col" colspan="4" style="text-align: center;font-size: 18px;font-weight: bold">本卡还款信息</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row" style="width: 25%;">#</th>
                    <th scope="row" style="width: 25%;">服务名称</td>
                    <th scope="row" style="width: 25%;">备注</td>
                    <th scope="row" style="width: 25%;">查询结果</td>
                </tr>
                <tr>
                    <th scope="row">1</th>
                    <td>自动还款</td>
                    <td id="autoRepayment" th:text="${user.autoRepayment}"></td>
                    <td>
                        <button id="updateAutoRepayment" class="btn btn-primary">    </button>
                    </td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>本卡本期到账还款日</td>
                    <td id="repayment" th:text="${credit.repayment}"></td>
                    <td>还款日期</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>本卡本期账单金额</td>
                    <td id="debt" th:text="${credit.debt}"></td>
                    <td></td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td>查看本卡账单</td>
                    <td id="creditIdSelect">
                        <a th:href="@{../bill/list}">查看账单</a>
                    </td>
                    <td>跳转至已出账单界面</td>
                </tr>
                <tr>
                    <th scope="row">5</th>
                    <td>申请分期</td>
                    <td>
                        <a href="stage.html">申请分期</a>
                    </td>
                    <td>跳转至账单分期界面</td>
                </tr>
                <tr>
                    <th scope="row">6</th>
                    <td>本期剩余应还金额</td>
                    <td>
                        <a th:href="@{../bill/list(flag=W)}">未出账单</a>
                    </td>
                    <td>跳转至未出账单界面</td>
                </tr>
                <tr>
                    <th scope="row">7</th>
                    <td>本期剩余最低还款金额</td>
                    <td id="minimun" th:text="${credit.debt}/10"></td>
                    <td></td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="panel-footer text-right">
            八仙过海项目组版权所有
        </div>



        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="panel  panel-info">
                        <div class="panel-heading" style="letter-spacing:30px;">
                            <h3 class="modal-title" id="exampleModalLabel">分期详情</h3>
                        </div>
                    </div>
                    <div class="modal-body">
                        <table class="table" th:fragment="creditType">
                            <tr>
                                <td>卡类型</td>
                                <td colspan="6">分期期数及利息</td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>分3期</td>
                                <td>分6期</td>
                                <td>分9期</td>
                                <td>分12期</td>
                                <td>分18期</td>
                                <td>分24期</td>
                            </tr>
                            <tr>
                                <td th:text="${creditType.typename}"></td>
                                <td id="threeStage" th:text="${creditType.threeStage}"></td>
                                <td id="sixStage" th:text="${creditType.sixStage}"></td>
                                <td id="nineStage" th:text="${creditType.nineStage}"></td>
                                <td id="twelveStage" th:text="${creditType.twelveStage}"></td>
                                <td id="eighteenStage" th:text="${creditType.eighteenStage}"></td>
                                <td id="twentyfourStage" th:text="${creditType.twentyfourStage}"></td>
                            </tr>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    function loadPage() {
        $("#userLimit").text(milliFormat( $("#userLimit").text()));
        $("#availableCredit").text(milliFormat( $("#availableCredit").text()));
        $("#consumed").text(milliFormat( $("#consumed").text()));
        $("#debt").text(milliFormat( $("#debt").text()));
        $("#minimun").text(milliFormat(parseFloat($("#minimun").text()).toFixed(2)));
        $("#threeStage").text(valueToPercent( $("#threeStage").text())+"%");
        $("#sixStage").text(valueToPercent( $("#sixStage").text())+"%");
        $("#nineStage").text(valueToPercent( $("#nineStage").text())+"%");
        $("#twelveStage").text(valueToPercent( $("#twelveStage").text())+"%");
        $("#eighteenStage").text(valueToPercent( $("#eighteenStage").text())+"%");
        $("#twentyfourStage").text(valueToPercent( $("#twentyfourStage").text())+"%");
        if( $("#autoRepayment").text() == "已开通"){
            $("#updateAutoRepayment").text("关闭")
        }else {
            $("#updateAutoRepayment").text("开通")
        }
    }

    var flag = 0;
    $("#typeFather").on("click","#updateBillType",function () {
        var buttentype = "";
        var updatetype = "";
        if (flag == 0){
            buttentype = " <button id=\"updateBillType\" class=\"btn btn-success\">保存修改</button>"
            $.ajax({
                url:"/billType/list",
                async:false,
                success:function (data) {
                    //alert(data.data)
                    //console.log(data.data);
                    updatetype = "<select class=\"form-control\" id=\"choosetype\">\n"
                    $.each(data,function (index,type) {
                        updatetype += "<option>"+type.typename+"</option>\n"
                    })
                    updatetype += "</select>";
                    flag = 1;
                    $("#billType").html(updatetype)
                }
            })
        }else {
            buttentype = " <button id=\"updateBillType\" class=\"btn btn-primary\">修改账单寄送方式</button>"
            updatetype = "";
            var billType = ""
            billType = $("#choosetype").val();
            $.ajax({
                url:"/userInfo/uapdateBillType?billType="+billType,
                async:false,
                success:function (data) {
                    //alert(data.data)
                    //console.log(data.data);
                    updatetype = data.billType;
                    flag = 0;
                    $("#billType").text(updatetype);
                }
            })
        }
        $(this).parent().html(buttentype);
    })

    var tab = 0;
    $("#timeFather").on("click","#updateRemindTime",function () {
        var repayment = $("#repayment").text();
        var num = repayment.substring(repayment.lastIndexOf("-")+1);
        var remindTime = "";
        var timebutten = "";
        if(tab == 0){
            remindTime += "<select multiple class=\"form-control\" id=\"chooseTime\">\n"
                    for(i = 1; i < num; i++) {
                        remindTime += "<option>"+i+"</option>\n"
                    }
            remindTime += "</select>";
            timebutten = "<button id=\"updateRemindTime\" class=\"btn btn-success\">保存修改</button>";
            $("#remindTime").html(remindTime);
            tab = 1;
        }else {
            timebutten = "<button id=\"updateRemindTime\" class=\"btn btn-primary\">修改还款提醒时间</button>";
            remindTime = $("#chooseTime").val();
            $.ajax({
                url:"/credit/updateRemindTime?remindTime="+remindTime,
                async:false,
                success:function (data) {
                    //alert(data)
                    //console.log(data);
                    $("#remindTime").text("每月"+data.remindTime+"日");
                    tab = 0;
                }
            })
        }
        $(this).parent().html(timebutten);
    })

    $("#updateAutoRepayment").click(function () {
        $.ajax({
            url:"/userInfo/uapdateAuto",
            async:false,
            success:function (data) {
                $("#autoRepayment").text(data.autoRepayment);
                if( $("#autoRepayment").text() == "已开通"){
                    $("#updateAutoRepayment").text("关闭")
                }else {
                    $("#updateAutoRepayment").text("开通")
                }
            }
        })
    })

    //数字千位分隔符，可操作小数
    function milliFormat(num) {
        return num && num.toString()
            .replace(/\d+/, function(s){
                return s.replace(/(\d)(?=(\d{3})+$)/g, '$1,')
            })
    }

    //将小数转成百分数
    function valueToPercent(value) {
        value = value + '';
        const pointIndex = value.indexOf('.');
        if (pointIndex === -1) return (value - 0) * 100;
        const powIndex = value.length - pointIndex - 1;
        return (value.replace('.', '') - 0) * Math.pow(10, 2 - powIndex);
    }

</script>
</html>